<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>用户信息添加</title>

		<meta name="description" content="Source code generated using layoutit.com">
		<meta name="author" content="LayoutIt!">

		<link href="${basePath}Bootstrap3/css/bootstrap.min.css" rel="stylesheet">
		<link href="${basePath}Bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet">
		<link href="${basePath}Bootstrap3/css/style.css" rel="stylesheet">
		<style type="text/css">
			/**文本框内容右对齐**/
			
			label {
				text-align: right;
			}
			/**自定义row的行距**/
			
			.rowHeigth {
				margin-top: 10px;
			}
		</style>
		<script src="${basePath}Bootstrap3/js/jquery.min.js"></script>
		<script src="${basePath}Bootstrap3/js/bootstrap.min.js"></script>
		<script src="${basePath}Bootstrap3/js/scripts.js"></script>
		<!-- ======easyui====== -->
		<link rel="stylesheet" type="text/css" href="${basePath}jquery-easyui-1.5/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="${basePath}jquery-easyui-1.5/themes/icon.css">
		<script type="text/javascript" src="${basePath}jquery-easyui-1.5/jquery.min.js"></script>
		<script type="text/javascript" src="${basePath}jquery-easyui-1.5/jquery.easyui.min.js"></script>

		<!-- ======easyui ajax====== -->
		<script type="text/javascript">
			//页面初始化时加载 省份 下拉类表的省份信息
			$(function() {
				//使用ajax进行省份信息的加载
				$.ajax({
					//请求的服务器的url地址（对应 form表单的action，建议使用全路径）
					url: "${basePath}getProvinceInfo.do",
					// 进行http服务器请求的方式（form表单的 method属性）
					type: "post",
					//使用进行异步处理（默认：true）
					async: true,
					//使用使用缓存默认: true
					cache: false,
					//本次进行ajax请求发送给发服务器的表单数据（以键值对的形式给定）
					data: {"opt":"101","opt2":"120"},
					//ajax返回的数据类型
					dataType: "json",
					//处理成功之后，进行回发处理
					success: function(jsondata) {
						//进行请求成功之后的业务逻辑处理，使用js或jquery进行dhtml操作
						console.info("获取的ajax返回的结果内容：" + jsondata);
						//拼写的内容
						var strContent = "<option></option>";
						//解析json数据
						for(var index = 0; index < jsondata.length; index++) {
							strContent += "<option value='" + jsondata[index].provincecode + "'>" + jsondata[index].provincename + "</option>";
						}
						//将拼写的html内容添加到select控件中
						$("#province").html(strContent);
					},
					//ajax请求错误时的提示信息
					error: function() {
						alert("出现问题，请找xxx联系");
					}
				});
				
				//使用ajax进行城市信息的加载
				//给省份的下拉选择框绑定一个change事件
				/*$("#province").bind("change",function(){					
				});*/
				$("#province").change(function(){
					console.info($("#province").val());
					$.ajax({
					//请求的服务器的url地址（对应 form表单的action，建议使用全路径）
					//url: "${basePath}getCityInfo.do",
					url: "${basePath}getCityInfo2.do",
					// 进行http服务器请求的方式（form表单的 method属性）
					type: "post",
					//使用进行异步处理（默认：true）
					async: true,
					//使用使用缓存默认: true
					cache: false,
					//本次进行ajax请求发送给发服务器的表单数据（以键值对的形式给定）
					//data: {"pid":$("#province").val()},
					//使用serialize方法将表单进行序列胡封装处理，作为ajax请求的表单内容提交给服务器
					data:$("#myForm1").serialize(),
					//ajax返回的数据类型
					dataType: "json",
					//处理成功之后，进行回发处理
					success: function(jsondata) {
						//进行请求成功之后的业务逻辑处理，使用js或jquery进行dhtml操作
						console.info("获取的ajax返回的结果内容：" + jsondata);
						//拼写的内容
						var strContent = "<option></option>";
						//解析json数据
						console.info("chengshixinxi...");
						$.each(jsondata, function(index,val) {
							console.info(val);
							strContent += "<option value='" + val.citycode + "'>" + val.cityname + "</option>";
						});
						//将拼写的html内容添加到select控件中
						$("#city").html(strContent);
					},
					//ajax请求错误时的提示信息
					error: function() {
						alert("出现问题，请找xxx联系");
					}
				});
				});
				
			});
		</script>
		<!--  ======easyui ajax======  -->
	</head>

	<body>

		<form action="${basePath}saveUserInfo.do" method="post" id="myForm1">

			<div class="container-fluid">
				<div class="row rowHeigth">

					<input type="hidden" id="txtUserId" name="txtUserId" value="${requestScope.usersB.userid }">

					<input type="hidden" id="hiddensex" value="${requestScope.usersB.usersex }">

					<input type="hidden" id="hiddenselectAge" value="${requestScope.usersB.userage }">

					<div class="form-group">
						<label class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="txtUserName" name="username" value="${requestScope.usersB.username }" placeholder="用户名">
						</div>

						<label class="col-sm-2 control-label">性别</label>
						<div class="col-sm-4">
							<label class="radio-inline"> 
						<input type="radio"	name="selectSext" id="selectSext1" value="女"  > 女
						</label> <label class="radio-inline"> <input type="radio"
							name="selectSext" id="selectSext2" value="男" > 男
						</label>

							<%-- <label class="radio-inline"> 
						<input type="radio"	name="selectSext" id="selectSext1" value="女" <c:if test="${requestScope.usersB.usersex =='女' }">checked</c:if>  > 女
						</label> <label class="radio-inline"> <input type="radio"
							name="selectSext" id="selectSext2" value="男" <c:if test="${requestScope.usersB.usersex =='男' }">checked</c:if>> 男
						</label> --%>
						</div>
					</div>

				</div>

				<div class="row rowHeigth">
					<div class="form-group">
						<label class="col-sm-2 control-label">密码</label>
						<div class="col-sm-4">
							<input type="password" class="form-control" id="txtUserPsw" name="txtUserPsw" value="${requestScope.usersB.userpsw }" placeholder="密码">
						</div>

						<label class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-4">
							<input type="password" class="form-control" id="txtUserPsw2" name="txtUserPsw2" value="${requestScope.usersB.userpsw }" placeholder="确认密码">
						</div>
					</div>

				</div>

				<div class="row rowHeigth">

					<div class="form-group">
						<label class="col-sm-2 control-label" for="txtUserAge">年龄</label>
						<div class="col-sm-4">
							<select class="form-control" id="txtUserAge" name="txtUserAge">
								<c:forEach begin="18" end="60" varStatus="st">
									<option value="${st.index }">${st.index }</option>
								</c:forEach>
							</select>

						</div>

						<label class="col-sm-2 control-label" for="txtUserTel">出生日期</label>
						<div class="col-sm-4">
							<input type="text" class="easyui-datetimebox" id="txtUserTel" name="userBirthday" placeholder="联系方式">

						</div>
					</div>

				</div>

				<div class="row rowHeigth">

					<div class="form-group">
						<label class="col-sm-2 control-label" for="province">省份</label>
						<div class="col-sm-4">
							<select class="form-control" id="province" name="province">
							</select>
						</div>

						<label class="col-sm-2 control-label" for="city">城市</label>
						<div class="col-sm-4">
							<select class="form-control" id="city" name="city">
							</select>
						</div>
					</div>

				</div>

				<div class="row rowHeigth">
					<div class="form-group">
						<label class="col-sm-2 control-label" for="txtUserAddress">地址</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="txtUserAddress" name="txtUserAddress" value="${requestScope.usersB.useraddress }" placeholder="地址">
						</div>

					</div>

				</div>

				<div class="row rowHeigth">
					<div class="form-group">
						<div class="col-sm-offset-4 col-sm-2">
							<button type="submit" class="btn btn-default">保存</button>
						</div>
						<div class="col-sm-offset-2 col-sm-4">
							<button type="reset" class="btn btn-default">重置</button>
						</div>
					</div>

				</div>

			</div>

		</form>

	</body>

</html>